import {Meta} from '@storybook/addon-docs/blocks';

<Meta title="Guide/Style/Introduction" />

# Introduction - TailwindCSS

Going forward we are adopting the [tailwindcss](https://tailwindcss.com) framework for styling our Admin interface.

For **migration path** and **motivation** details, see [Technical Roadmap](../?path=/docs/guide-technical-roadmap--docs#tailwindcss-35).

See `ActivityIndicatorPopup.vue` as an example component where TailwindCSS is used.

## Recomendations

- It is highly recommend to use [tailwindcss cheatsheet](https://nerdcave.com/tailwind-cheat-sheet) to quickly find classes you need, especially if you are already familiar with css.
- If you don't have much experience with writing CSS, tailwind should ease the experience as it provides a useful subset of styling primitives from which it's easier to choose.
- Check the following pages for properties that are hand-picked to fit our styling gude: [colors](../?path=/docs/guide-style-colors--docs), [fonts](../?path=/docs/guide-style-fonts--docs), [shadows](../?path=/docs/guide-style-shadows--docs) and [radiuses](../?path=/docs/guide-style-radius--docs)
- All other properties comes from TailwindCSS defaults. Therefore you can directly use the values you find in [cheatsheet](https://nerdcave.com/tailwind-cheat-sheet) or in [tailwind documentation](https://tailwindcss.com/docs/utility-first).
